<template>
  <div class="czjl-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>操作记录</span>
      </div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="operatorName" label="操作人" width="180"></el-table-column>
        <el-table-column label="操作描述" width="">
          <template slot-scope="scope">
            <span>{{ scope.row.descp }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operateTime" label="操作时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.operateTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CzjlPage',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      
      var proxy = {
        url: 'pbglbatchfilllog/list',
        datas: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }
      
      this.$oPost({ proxy }, (response) => {
        if (response && response.code === 1000) {
          // 接口返回的数据结构为 {code: 1000, data: {list: []}}
          this.tableData = response.data.list || []
          // 从list长度获取总数
          this.total = this.tableData.length
        } else {
          this.$message.error('获取操作记录失败：' + (response.msg || '未知错误'))
          this.tableData = []
          this.total = 0
        }
        this.loading = false
      }, (error) => {
        this.$message.error('获取操作记录时发生错误')
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    
    // 格式化日期对象
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    
    // 获取操作描述
    getOperationDescription(row) {
      // 根据返回的数据生成操作描述
      let descp = `${row.operatorName} 进行了批量填充操作`
      if (row.scheduleId) {
        descp += `，排班ID：${row.scheduleId}`
      }
      return descp
    },
    
    // 格式化cellDates字段
    formatCellDates(cellDates) {
      if (!cellDates) return ''
      // 将逗号分隔的日期字符串转换为更易读的格式
      return cellDates.replace(/,/g, '\n')
    },
    
    handleSizeChange(size) {
      this.pageSize = size
      this.loadData()
    },
    
    handleCurrentChange(current) {
      this.currentPage = current
      this.loadData()
    }
  }
}
</script>

<style scoped>
.czjl-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
